一、格式化痛点
虽然我们团队制定了代码规范，但是平时大家写代码的时候还是各有各的风格，遇上紧急的需求或者bug，规范基本是没有的。
而且目前团队不建议使用编辑器自带的格式化插件，所以多人开发的项目通常是越来越乱。
关于代码格式化的插件，大家不喜欢的原因是，
第一，团队有人用WebStorm，有人用VScode，格式化风格可能不一样；
第二，例如VScode的插件Prettier和Vetur，它们都有格式化的功能，可能会有冲突；
第三，有时格式化后的代码很奇怪，例如下面这种，总之就是看着不舒服。
我个人是很喜欢自动格式化的。但格式化后的代码确实不好看，怎么办呢？
二、配置prettier
为了符合团队代码规范，可以去自己设置插件中的配置项，这是Vetur自带的格式化工具。
也可以自定义一个 .prettierrc.js 文件，这样Vetur会按照文件中的配置来格式化。
module.exports = {
printWidth: 100, // 单行代码的最大宽度
tabWidth: 2, // 缩进
useTabs: false, // 使用tab还是空格
semi: true, // 分号
singleQuote: true, // 单引号
trailingComma: 'none', // 尾随逗号
bracketSpacing: true, // 括号间距{ foo: bar }
jsxBracketSameLine: false, // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行
arrowParens: 'avoid', // 箭头函数圆括号
};
三、安装Prettier
如果不使用格式化插件，但仍然想保证代码规范，就需要使用 Eslint+Prettier+Husky来强制格式化。
项目新建时可以选择 ESLint+Prettier。然后再安装 prettier-eslint-cli。
如果想在已有的项目中使用Prettier，
- 需要安装以下几个插件
npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
prettier：prettier插件的核心代码
eslint-plugin-prettier：将prettier作为ESLint规范来使用
eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
prettier-eslint-cli：允许你对多个文件用prettier-eslint进行格式化
按照上面的方式创建
.prettierrc.js。在
.eslintrc.js中添加extends
四、安装Husky
这样就能够按照代码规范来格式化代码。那如何强制执行呢？需要用到husky和lint-staged
npm install husky lint-staged --save-dev
husky：在项目中添加git钩子，这里主要用到 pre-commit这个 hook，在执行 commit 之前，运行一些自定义操作
lint-staged：用于对 Git 暂存区中的文件执行代码检测
在package.json中添加以下代码，这样在我们提交代码时，npm会先执行prettier-eslint，git add，再commit。
"scripts": {
"format": "prettier-eslint \"src/**/*.{js,vue,scss}\" --write"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue,scss,json}": [
"prettier-eslint --write",
"git add"
]
},
安装成功后会生成一个.husky文件夹，包含了pre-commit脚本，里面有配置的lint-staged命令。
现在在执行commit命令前能强制执行代码格式化，并把格式化后的代码也加入暂存区，然后再提交到本地仓库。